<template>
	<view class='person' :style='{ "padding-top":headerHeight+"px" }'>
		<view class="pageHead dFlex jBetween_aCenter" :style="{'padding-top':headerTop+'px'}">
			<!-- <u-icon name="arrow-left" color='#ffffff'></u-icon> -->
			<view class="pageTit">个人中心</view>
			<!-- <u-icon name="arrow-left" color='#ffffff'></u-icon> -->
		</view>
		<view class="userCenter">
			<view class="userInfo dFlex jStart_aCenter">
				<view class="userTx imgPublic">
					<image v-if='userInfo.image_head' :src="userInfo.image_head" mode="widthFix"></image>
					<image v-else src="../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="info" v-if='uid'>
					<view class="nickName">{{userInfo.nickName}}</view>
					<view class="showId">ID {{userInfo.memberId?userInfo.memberId:'--'}}</view>
				</view>
				<view class="info" v-else @click='wxLogin'>
					<view class="nickName">登录</view>
					
				</view>
			</view>
		</view>
		<view class="orders dFlex jAround_aCenter">
			<view class="orderOne" v-if='identify == "2"' @click="lookOrder(2)">
				<view class="orderIcon imgPublic">
					<image src="../static/images/yibaojia@2x.png" mode="widthFix"></image>
				</view>
				<text>已报价</text>
			</view>
			<view class="orderOne" v-if='identify == "2"' @click="lookOrder(3)">
				<view class="orderIcon imgPublic">
					<image src="../static/images/daizhifu@2x.png" mode="widthFix"></image>
				</view>
				<text>待支付</text>
			</view>
			<view class="orderOne" v-if='identify == "1"' @click="lookOrder(1)">
				<view class="orderIcon imgPublic">
					<image src="../static/images/yibaojia@2x.png" mode="widthFix"></image>
				</view>
				<text>报价中</text>
			</view>
			<view class="orderOne" @click="lookOrder(identify == '1' ? 3 : 4)">
				<view class="orderIcon imgPublic">
					<image src="../static/images/yunshuzhong@2x.png" mode="widthFix"></image>
				</view>
				<text>运输中</text>
			</view>
			<view v-if='identify == "1"' class="orderOne" @click="lookOrder(0)">
				<view class="orderIcon imgPublic">
					<image src="../static/images/quanbu@2x.png" mode="widthFix"></image>
				</view>
				<text>全部行程</text>
			</view>
		</view>
		<view class='menus'>
			<!-- 车主 -->
			<view class="menu_line dFlex jBetween_aCenter" v-if="identify == '2'" @click="goPage(0,'/person/team')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/tuandui@2x.png"></image>
					</view>
					<text>我的车队</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(1,'/person/identify')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/qiehuan@2x.png"></image>
					</view>
					<text>切换身份</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' :label='`当前身份: ${identify == "1" ? "货主" : "司机"}`' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(0,'/person/description?status=1')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/guanyu@2x.png"></image>
					</view>
					<text>关于我们</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(0,'/person/description?status=2')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/yinsi@2x.png"></image>
					</view>
					<text>隐私政策</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(0,'/person/description?status=3')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/xieyi@2x.png"></image>
					</view>
					<text>用户协议</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(0,'/person/help')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/bangzhu@2x.png"></image>
					</view>
					<text>帮助中心</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
			<view class="menu_line dFlex jBetween_aCenter" @click="goPage(1,'/person/setting')">
				<view class="menuContent dFlex jStart_aCenter">
					<view class="menuIcon imgPublic">
						<image src="../static/images/shezhi@2x.png"></image>
					</view>
					<text>设置中心</text>
				</view>
				<u-icon name="arrow-right" color='#CCCCCC' labelPos='left' labelSize='12px' labelColor='#999999'></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		weiLogin
	} from '@/tool/http.js'
	export default {
		data() {
			return {
				headerTop: getApp().globalData.header_top,
				headerHeight:"",
				userInfo:{},
				uid:'',
				identify:'',
			};
		},
		onShow() {
			this.uid = uni.getStorageSync('uid')?uni.getStorageSync('uid'):'';
			this.identify = uni.getStorageSync('use_identify');
			uni.createSelectorQuery().select('.pageHead').boundingClientRect(data => {
				this.headerHeight = data.height;
			}).exec()
			if(this.uid){
				this.getUserInfo();
			}
		},
		methods:{
			// 查看列表
			lookOrder(status){
				uni.setStorageSync('currentStatus',status);
				uni.switchTab({
					url:'/pages/bench'
				})
			},
			// 用户信息
			async getUserInfo(){
				let res = await userInfo({
					memberId:this.uid,
				});
				console.log(res);
				if(res){
					this.userInfo = res;
				}
			},
			// 微信登录
			wxLogin(){
				uni.login({
					success:async(info)=>{
						if(info.code){
							let res = await weiLogin({
								js_code:info.code,
							});
							if(res){
								uni.showToast({
									title:'登录成功',
									icon:'success'
								})
								this.uid = res.memberId;
								this.getUserInfo();
								uni.setStorageSync('uid',res.memberId);
							}
						}
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'登录凭证获取失败',
							icon:"none"
						})
					}
				})
			},
			goPage(needLogin,url){
				if(needLogin){
					if(!this.uid){
						uni.showToast({
							title:'登录后可继续操作',
							icon:'none'
						})
						return;
					}
				}
				uni.navigateTo({
					url:url,
				})
			},
		}
	}
</script>

<style lang="scss">
	.menus{
		.menu_line{
			.menuContent{
				.menuIcon{
					width: 20px;
					height: 20px;
					margin-right: 10px;
					image{
						width:100%;
						height:100%;
					}
				}
				flex: 1;
				color: #333333;
			}
			padding: 14px 12px;
			box-sizing: border-box;
			width: 100%;
			border-bottom: 1px solid #E6E6E6;
		}
		.menu_line:last-child{
			border: none;
		}
		width: 100%;
		box-sizing: border-box;
		background: white;
	}
	.orders{
		.orderOne{
			.orderIcon{
				width: 28px;
				height: 28px;
				margin:0 auto 6px;
			}
			flex: 1;
			text-align: center;
			color:#666666;
		}
		width: 100%;
		padding:18px 12px 12px;
		background: white;
		box-sizing: border-box;
		margin:0 0 -10px;
		position: relative;
		top:-10px;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}
	.userCenter{
		.userInfo{
			.info{
				flex: 1;
				color: white;
				.showId{
					font-size: 12px;
					margin-top: 10px;
				}
			}
			.userTx{
				width: 56px;
				height: 56px;
				border-radius: 50%;
				margin-right: 12px;
				padding: 2px;
				box-sizing: border-box;
				background: white;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			width: 100%;
		}
		padding: 20px 12px 30px;
		box-sizing: border-box;
		background: linear-gradient(to right, #00A3F5, #0087FC);
	}
	.pageHead {
		background: linear-gradient(to right, #00A3F5, #0087FC);
		color: white;
		position: fixed;
		top: 0;
		z-index: 2;
	}
</style>
